<template>
  <div class="_wz_safeProduction">
    <!--    左边-->
    <div class="_wz_safeProduction_left">
<!--      <span class="_wz_borderAnimation"></span><span class="_wz_borderAnimation"></span><span class="_wz_borderAnimation"></span><span class="_wz_borderAnimation"></span>-->
      <div class="_wz_safeProduction_left_list" style="margin-bottom: 10px;">
        <div style="display: flex;justify-content: center;flex-direction: column;align-items:center;height: 160px;margin-top: 40px" v-for="(item,index) in vehicleData" :key="item.title">
          <img src="@/assets/opera/icon_05.png" alt="" width="74" style="margin-top: 10px">
          <div style="text-align: center">
            <div style="font-size: 36px;color: white;font-family:'Barlow-Medium1'">{{ item.value }}</div>
            <div style="font-size: 20px;color: white">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
    <!--    中间-->
    <div class="_wz_safeProduction_middle">
      <div class="_wz_safeProduction_middle_left">
        <div class="title-top">
          <div style="display: flex;position: absolute;top: 6px; left: 10px">
            <img src="@/assets/opera/title01.png" alt="" width="13" >
            <div style="font-size: 18px;margin: 4px 0 0 10px;">各县(市)区货运车辆今日行驶里程排行榜</div>
          </div>
          <div class="title01"></div>
          <div class="title02"></div>
          <div class="title03"></div>
        </div>
        <div class="table">
          <div class="table-li">
            <div style="height: 100%;display: flex;">
              <div class="table-li-01">排名</div>
              <div class="table-li-01">县(市)区</div>
              <div class="table-li-01">车辆总数(台)</div>
              <div class="table-li-01">里程(km)</div>
            </div>
            <img src="@/assets/opera/itembg-title.png" alt="" width="100%" height="48px" style="position: absolute;top: 0">
          </div>
          <div style="height: calc(100% - 48px);overflow: hidden">

            <TransitionGroup tag="div" name="fade">
              <div class="table-li table-hover"  style="display: flex;" v-for="(item,index) in dataList" :key="item.county">
                <div class="table-li-01">
                  <div class="listItemTopl" :class="index < 3?`top${index}`:'top3'">{{ index + 1 }}</div>
                </div>
                <div class="table-li-01" style="text-align: center">{{ item.county }}</div>
                <div class="table-li-01" style="font-size: 22px">{{ item.vehicleCount }}</div>
                <div class="table-li-01" style="font-size: 22px">{{item.mileage}}</div>
              </div>

            </TransitionGroup>
<!--            <vue3-seamless-scroll  hover-stop="true" :list="dataList" hover="true" step="0.3">-->

<!--            </vue3-seamless-scroll>-->

          </div>
        </div>
      </div>
      <div class="_wz_safeProduction_middle_right">
        <div class="title-top">
          <div style="display: flex;position: absolute;top: 6px; left: 10px">
            <img src="@/assets/opera/title01.png" alt="" width="13" >
            <div style="font-size: 18px;margin: 4px 0 0 10px;">各县(市)区货运车辆今日在线排行榜</div>
          </div>
          <div class="title01"></div>
          <div class="title02"></div>
          <div class="title03"></div>
        </div>
        <div class="table">
          <div class="table-li">
            <div style="height: 100%;display: flex;">
              <div class="table-li-01">排名</div>
              <div class="table-li-01">县(市)区</div>
              <div class="table-li-01">车辆总数(台)</div>
              <div class="table-li-01" style="width: 150px">今日车辆在线(台)</div>
            </div>
            <img src="@/assets/opera/itembg-title.png" alt="" width="100%" height="48px" style="position: absolute;top: 0">
          </div>
          <div style="height: calc(100% - 48px);">
            <div class="table-li table-hover" :class="countdown - 1 == index ?'hover-bg':''"  style="display: flex;" v-for="(item,index) in onlineRankingList">
              <div class="table-li-01">
                <div class="listItemTopl" :class="index < 3?`top${index}`:'top3'">{{ index + 1 }}</div>
              </div>
              <div class="table-li-01" style="text-align: center">{{ item.county }}</div>
              <div class="table-li-01" style="font-size: 22px">{{ item.vehicleCount}}</div>
              <div class="table-li-01" style="width: 150px;font-size: 22px">{{ parseInt(item.isOnline * item.vehicleCount)}}</div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <!--    右边-->
    <div class="_wz_safeProduction_right">
      <div class="_wz_safeProduction_right_list" style="margin-bottom: 10px;">
        <div class="title-top">
          <div style="display: flex;position: absolute;top: 6px; left: 10px">
            <img src="@/assets/opera/title01.png" alt="" width="13" >
            <div style="font-size: 18px;margin: 4px 0 0 10px;">今日在线详情</div>
          </div>
          <div class="title01"></div>
          <div class="title02"></div>
          <div class="title03"></div>
        </div>
        <div style="height: calc(100% - 46px);width: 100%" >
          <div style="height: 130px;text-align: center;line-height: 140px;color: white;font-size: 36px">
              第{{conversionDataList && conversionDataList.rank?conversionDataList.rank:0}}名 - {{conversionDataList && conversionDataList.county?conversionDataList.county:''}}
          </div>
          <div style="display: flex">
            <div style="text-align: center;width: 50%;">
              <div style="font-size: 36px;color: white;font-family:'Barlow-Medium1'">{{ conversionDataList && conversionDataList.vehicleCount?conversionDataList.vehicleCount:0 }}</div>
              <div style="font-size: 20px;color: white">{{ '今日运营车辆' }}</div>
            </div>
            <div style="text-align: center;width: 50%;">
              <div style="font-size: 36px;color: white;font-family:'Barlow-Medium1'">{{ conversionDataList && conversionDataList.mileage?conversionDataList.mileage:0}}</div>
              <div style="font-size: 20px;color: white">{{ '运营总里程' }}</div>
            </div>
          </div>

        </div>
      </div>
      <div class="_wz_safeProduction_right_list" style="margin-bottom: 10px;">
        <div class="title-top">
          <div style="display: flex;position: absolute;top: 6px; left: 10px">
            <img src="@/assets/opera/title01.png" alt="" width="13" >
            <div style="font-size: 18px;margin: 4px 0 0 10px;">区县车辆平均运距里程</div>
          </div>
          <div class="title01"></div>
          <div class="title02"></div>
          <div class="title03"></div>
        </div>
        <div style="height: calc(100% - 46px);width: 100%" id="enrollmentRate"></div>
      </div>
      <div class="_wz_safeProduction_right_list">
        <div class="title-top">
          <div style="display: flex;position: absolute;top: 6px; left: 10px">
            <img src="@/assets/opera/title01.png" alt="" width="13" >
            <div style="font-size: 18px;margin: 4px 0 0 10px;">区县月度车辆上线数</div>
          </div>
          <div class="title01"></div>
          <div class="title02"></div>
          <div class="title03"></div>
        </div>
        <div style="height: calc(100% - 46px);width: 100%" id="light"></div>
      </div>
    </div>
  </div>
  <modulePage ref="moduleRef"></modulePage>
</template>
<script setup>
import modulePage from './modulePage.vue'
import gsap from 'gsap'
import {inject, ref, onMounted, computed} from 'vue'
const $echarts = inject('$echarts');// 变量全局化 echarts
import 'echarts-liquidfill/src/liquidFill.js'; //在这里引入

const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
const $axios = inject('$axiosInterceptor');// 变量全局化 axios
const moduleRef = ref()
const countdown = ref(0)
const expire = ref(false)


const dataList = ref([
  {county:'肥乡区',mileage:137352,vehicleCount:17190,isOnline:0.23,rank:1},
  {county:'邯山区',mileage:63234,vehicleCount:12032,isOnline:0.12,rank:1},
  {county:'大名县',mileage:42206,vehicleCount:4052,isOnline:0.07,rank:1},
  {county:'永年区',mileage:39714,vehicleCount:4917,isOnline:0.06,rank:1},
  {county:'馆陶县',mileage:32395,vehicleCount:3712,isOnline:0.06,rank:1},
  {county:'成安县',mileage:32393,vehicleCount:3897,isOnline:0.05,rank:1},
  {county:'曲周县',mileage:28780,vehicleCount:4130,isOnline:0.06,rank:1},
  {county:'丛台区',mileage:27091,vehicleCount:4046,isOnline:0.04,rank:1},
  {county:'复兴区',mileage:23745,vehicleCount:3506,isOnline:0.05,rank:1},
  {county:'魏县',mileage:23162,vehicleCount:3198,isOnline:0.04,rank:1},
  {county:'峰峰矿区',mileage:21073,vehicleCount:3045,isOnline:0.03,rank:1},
  {county:'涉县',mileage:17879,vehicleCount:4457,isOnline:0.04,rank:1},
  {county:'广平县',mileage:16474,vehicleCount:1217,isOnline:0.02,rank:1},
  {county:'武安市',mileage:13341,vehicleCount:5835,isOnline:0.04,rank:1},
  {county:'临漳县',mileage:10712,vehicleCount:1622,isOnline:0.02,rank:1},
  {county:'磁县',mileage:8312,vehicleCount:2339,isOnline:0.02,rank:1},
  {county:'鸡泽县',mileage:5954,vehicleCount:1437,isOnline:0.02,rank:1},
  {county:'邱县',mileage:5944,vehicleCount:1025,isOnline:0.01,rank:1},
  {county:'邯郸经济技术开发区',mileage:2626,vehicleCount:227,isOnline:0.0,rank:1},
  {county:'冀南新区',mileage:495,vehicleCount:158,isOnline:0.0,rank:1},
])


const onlineRankingList = ref([
  {county:'肥乡区',mileage:137352,vehicleCount:17190,isOnline:0.23,rank:1},
  {county:'邯山区',mileage:63234,vehicleCount:12032,isOnline:0.12,rank:2},
  {county:'大名县',mileage:42206,vehicleCount:4052,isOnline:0.07,rank:3},
  {county:'永年区',mileage:39714,vehicleCount:4917,isOnline:0.06,rank:4},
  {county:'馆陶县',mileage:32395,vehicleCount:3712,isOnline:0.06,rank:5},
  {county:'成安县',mileage:32393,vehicleCount:3897,isOnline:0.05,rank:6},
  {county:'曲周县',mileage:28780,vehicleCount:4130,isOnline:0.06,rank:7},
  {county:'丛台区',mileage:27091,vehicleCount:4046,isOnline:0.04,rank:8},
  {county:'复兴区',mileage:23745,vehicleCount:3506,isOnline:0.05,rank:9},
  {county:'魏县',mileage:23162,vehicleCount:3198,isOnline:0.04,rank:10},
  {county:'峰峰矿区',mileage:21073,vehicleCount:3045,isOnline:0.03,rank:11},
  {county:'涉县',mileage:17879,vehicleCount:4457,isOnline:0.04,rank:12},
  {county:'广平县',mileage:16474,vehicleCount:1217,isOnline:0.02,rank:13},
  {county:'武安市',mileage:13341,vehicleCount:5835,isOnline:0.04,rank:14},
  {county:'临漳县',mileage:10712,vehicleCount:1622,isOnline:0.02,rank:15},
  {county:'磁县',mileage:8312,vehicleCount:2339,isOnline:0.02,rank:16},
  {county:'鸡泽县',mileage:5954,vehicleCount:1437,isOnline:0.02,rank:17},
  {county:'邱县',mileage:5944,vehicleCount:1025,isOnline:0.01,rank:18},
  {county:'邯郸经济技术开发区',mileage:2626,vehicleCount:227,isOnline:0.0,rank:19},
  {county:'冀南新区',mileage:495,vehicleCount:158,isOnline:0.0,rank:20},
])



const vehicleData = ref([
  {title:'日行驶里程(km)',value:551041,},
  {title:'车辆总数(台)',value:82042,},
  {title:'在线车辆(台)',value:31968,},
  {title:'离线车辆(台)',value:50074,},
])

setInterval(() => {
  //根据数组长度获取 要变化的个数
  let number = Math.floor(Math.random() * dataList.value.length);
  for (let i = 0; i < number; i++) {
    //需要变化的数组Index
    let index = Math.floor(Math.random() * dataList.value.length);
    //需要变化的数组的里程数
    let randomMileage = randomChangeMileage(20,800);
    dataList.value[index].mileage = dataList.value[index].mileage + randomMileage

    dataList.value = dataList.value.sort(function (a, b) {
      return b.mileage - a.mileage; //降序排序
      // return a - b; //升序排序
    });
  }
},6000)

const randomChangeMileage = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}

const conversionDataList = ref(onlineRankingList.value[0])

const lineData = ref([23,32,45,67,88,76,23,24,54])

const lindDataUpdate = () => {

  lineData.value = lineData.value.map(
      item =>parseInt( item+randomChangeMileage(20,50))
  )
  moduleRef.value.line({id:'enrollmentRate',value:lineData.value})
}


const lightSpotData = ref([502.84, 205.97, 332.79, 281.55, 398.35, 214.02])

const lightSpotDataUpdate = () => {
  lightSpotData.value = lightSpotData.value.map(
      item => {

        if (randomChangeMileage(1)){
          return parseInt(item+randomChangeMileage(20,300))
        }
        return parseInt(item-randomChangeMileage(20,300) < 0 ? item : item + randomChangeMileage(20,300)) ;
      }
  )
  moduleRef.value.lightSpot({id:'light',value:lightSpotData.value})
}


const authCode = () =>{
  if (countdown.value == 16) {
    countdown.value = 0;
  }
  expire.value = setTimeout(function () {
    conversionDataList.value = onlineRankingList.value[countdown.value]
    ++countdown.value
    authCode()
    lindDataUpdate()
    lightSpotDataUpdate()
  }, 6000);
}


// clearInterval(expire.value) // 清除定时
onMounted(()=>{

  authCode() // 表格滚动出发
  // moduleRef.value.water({id:'mychart', value:75})
  // moduleRef.value.water({id:'mychart1', value:32})
  // moduleRef.value.testOneChart({id:'testOne', value:32})
  moduleRef.value.line({id:'enrollmentRate',value:lineData.value})
  moduleRef.value.lightSpot({id:'light',value:lightSpotData.value})
  // moduleRef.value.area({id:'areaId',value:32})
  // moduleRef.value.camber({id:'camberId',value:32}) 弧形
})


</script>
<style lang="less">
._wz_safeProduction{
  position: relative;
  height: 100%;
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  .title-top{
    display: flex;
    align-items: flex-end;
    position: relative;
    color: white;
    width: 100%;
    height: 46px;
    .title01{
      width: 40px;
      height: 3px;
      background: #0086FF;
      border-radius: 0;
      opacity: 1;
    }
    .title02{
      width: calc(100% - 40px - 64px);
      height: 0.01563rem;
      background: #083566;
      border-radius: 0;
      opacity: 1;
      margin-bottom: 1px;
    }
    .title03{
      height: 100%;
      width: 64px;
      background: url("@/assets/opera/title02.png") no-repeat 50% 100%;
      background-size: 40px;
    }
  }

  ._wz_safeProduction_left{
    width: 350px;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: rgba(0,0,0,0.6);
    ._wz_safeProduction_left_list{
      height: 100%;
      color: white;
    }
  }
  ._wz_safeProduction_middle{
    width: calc(100% - 350px - 450px - 20px);
    height: 100%;
    display: flex;
    justify-content: space-between;
    ._wz_safeProduction_middle_left{
      width: 530px;
      height: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-between;
      background: rgba(0,0,0,0.6);
    }
    ._wz_safeProduction_middle_right{
      height: 100%;
      width: calc(100% - 530px - 10px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: rgba(0,0,0,0.6);
    }
    .table {
      width: 100%;
      color: white;
      position: relative;
      margin-top: 10px;
      height: calc(100% - 56px);
      overflow: hidden;
      .table-li{
        height: 48px;
        .table-li-01{
          height: 100%;
          display: flex;
          font-size: 18px;
          align-items: center;
          justify-content: center;
          width: calc(100% / 4);
        }
        .listItemTopl{
          width: 26px;
          height: 26px;
          font-size: 15px;
          font-weight: 700;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .top0{
          border: 1px solid;
          background:linear-gradient(45deg,#D9A320,#FFD571);
          border-image: linear-gradient(45deg,#FFD571,#D9A320) 1 1;
        }
        .top1{
          border: 1px solid;
          background: linear-gradient(45deg,#9A6642,#C89181);
          border-image: linear-gradient(45deg,#C89181,#9A6642) 1 1;
        }
        .top2{
          border: 1px solid;
          background: linear-gradient(45deg,#71CCC4,#12A5B6);
          border-image: linear-gradient(45deg,#71CCC4,#12A5B6) 1 1;
        }
        .top3{
          border: 1px solid;
          background: linear-gradient(45deg, #2C76BA, #779EBC);
          border-image: linear-gradient(45deg, #779EBC, #2C76BA) 1 1;
        }
      }
      .hover-bg{
        background: rgba(30, 159, 255, 0.35);
      }
      .table-hover{
        border-bottom: 1px solid #096c79;
      }
      .table-hover:hover{
        background: rgba(30, 159, 255, 0.35);
      }
    }
  }
  ._wz_safeProduction_right{
    width: 450px;
    height: 100%;
    ._wz_safeProduction_right_list{
      height: calc((100% - 20px) / 3);
      background: rgba(0,0,0,0.6);

    }
  }
  ._wz_borderAnimation:nth-child(1) {
    position: absolute;
    display: block;
    filter: hue-rotate(0deg);
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #3a86ff);
    animation: animate1 2s linear infinite;
  }
  @keyframes animate1 {
    0% {
      left: -100%;
    }
    50%,
    100% {
      left: 100%;
    }
  }
  ._wz_borderAnimation:nth-child(2) {
    position: absolute;
    display: block;
    filter: hue-rotate(60deg);
    top: -100%;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #3a86ff);
    animation: animate2 2s linear infinite;
    animation-delay: 1.5s;
  }
  @keyframes animate2 {
    0% {
      top: -100%;
    }
    50%,
    100% {
      top: 100%;
    }
  }
  ._wz_borderAnimation:nth-child(3) {
    position: absolute;
    display: block;
    filter: hue-rotate(120deg);
    bottom: 0;
    right: 0;
    width: 100%;
    background: linear-gradient(270deg, transparent, #3a86ff);
    animation: animate3 2s linear infinite;
    animation-delay: 1.5s;
  }
  @keyframes animate3 {
    0% {
      right: -100%;
      height: 3px;
    }
    50%,
    100% {
      height: 2px;
      right: 100%;
    }
  }
  ._wz_borderAnimation:nth-child(4) {
    position: absolute;
    display: block;
    filter: hue-rotate(300deg);
    bottom: -100%;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #3a86ff);
    animation: animate4 2s linear infinite;
    animation-delay: 1.75s;
  }
  @keyframes animate4 {
    0% {
      bottom: -100%;
    }
    50%,
    100% {
      bottom: 100%;
    }
  }
}

/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

/* 3. 确保离开的项目被移除出了布局流
      以便正确地计算移动时的动画效果。 */
.fade-leave-active {
  position: absolute;
}
</style>